<template>
  <div class="resource-list">
    <el-card shadow="hover">
      <el-button @click="addClass">添加广告位</el-button>
    </el-card>
    <el-card shadow="hover">
      <el-table :data="advertList"
                style="width: 100%; margin-bottom: 20px"
                v-loading="isLoading">
        <el-table-column prop="spaceKey"
                         label="spaceKey"
                         align="center"
                         width="100">
        </el-table-column>
        <el-table-column prop="name"
                         label="名称"
                         align="center"
                         width="180">
        </el-table-column>
        <el-table-column prop="createTime"
                         align="center"
                         label="添加时间">
        </el-table-column>
        <el-table-column prop="updateTime"
                         align="center"
                         label="更新时间">
        </el-table-column>
        <el-table-column width="180"
                         align="center"
                         label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="isEdit ? '编辑广告位' : '添加广告位'"
               :visible.sync="dialogVisible"
               width="50%">
      <category-edit v-if="dialogVisible"
                     :advert="advert"
                     :is-edit="isEdit"
                     @success="onSuccess"
                     @cancel="dialogVisible = false" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAdAllList } from '@/services/advert-space'
import CategoryEdit from './advert-edit.vue'

export default Vue.extend({
  name: 'AdvertSpaceList',
  data() {
    return {
      totalCount: 0,
      advertList: [], // 资源分类列表
      isLoading: true, // 加载状态
      dialogVisible: false,
      isEdit: true,
      advert: null
    }
  },
  components: {
    CategoryEdit
  },
  created() {
    this.loadAdList()
  },

  methods: {
    async loadAdList() {
      const { data } = await getAdAllList()
      this.advertList = data.content
      this.isLoading = false // 关闭加载中状态
    },

    handleEdit(item: any) {
      this.isEdit = true
      this.dialogVisible = true
      this.advert = item
    },

    handleDelete(item: any) {
      console.log('handleDelete', item)
    },

    addClass() {
      this.isEdit = false
      this.dialogVisible = true
    },
    onSuccess() {
      this.dialogVisible = false // 关闭对话框
      this.loadAdList() // 重新加载数据列表
    }
  }
})
</script>

<style lang="scss" scoped></style>
